<template>
    <fieldset class="fie">
        <legend>歌曲</legend>
        <h1 class="nine">九妹</h1>
        <h1>九九八十一</h1>
        <h1 class="l">流浪的歌</h1>
        <div class="content">
            <h1>h1标签</h1>
            <b>b标签</b>
            <em>em标签</em>
        </div>

        <div class="content2">
            <a href="#">a1</a>
        </div>
        <div class="content3">
            <a href="#">a2</a>
        </div>
        <div class="content4">
            <a href="#">a3</a>
        </div>
        <h1 class="mix">混入</h1>  
        <b class="b">一个朴实无华的b标签</b>
    </fieldset>
</template>

<style lang="scss" scoped>
// 导入外部样式后面加;
@import "../../../assets/text.scss";
    $c: red;
    $g: green;
    $b: 2px dashed #ccc;

    // 编译后看不见
    /*编译后可见*/
    /*！强力注释*/
    @mixin bd{
        // 混入
        border: 2px solid #ccc;
        background-color: red;
        font-size: 30px;
        font-weight: 800px;
        text-decoration: line-through;
    }
    // sass的函数
    @function fn($size){
        @return $size + 20 +px;
         //返回mixin
       
    
    }
    .b{
       font-size:fn(20)
       
        
    }
.fie {
    .nine {
        color: $c;
        a {
            text-decoration: none;
            $g: green;
        }
    }
    .l{
        &:hover{
            color: $c;
        background-color: $g;
        }
    }
}
.content{
    // 群组嵌套
    h1,b,em{
        color: $c;
    }
}

.content2,.content3,.content4{
    // 多个嵌套一个
    a{
        @include bd;
        background-color: $g;
        font: {
        size: 30px;
        weight:800px;
        }
        border:2px solid hotpink{
            // 属性嵌套
            // 右边无边框
            right: none
        };
    }
}

.mix {
    // 使用混入
    @include bd
}
</style>